<template>
  <div class="the-list">
    <div class="panel-search">
      <el-form inline :model="tableData.query" class="demo-form-inline">
        <el-form-item label="搜索">
          <el-input v-model="tableData.query.keyWord" placeholder="输入用户昵称、ID或手机号搜索"></el-input>
        </el-form-item>
        <el-form-item label="是否已读">
          <el-select v-model="tableData.query.isRead">
            <el-option label="全部" value="" />
            <el-option label="未读" value="0" />
            <el-option label="已读" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tableFn.onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="panel-table">
      <!-- <div class="table-head">
        <div>
          推送对象：选定用户，推送总量：2,333，已送达：2,222，已读：1,222
        </div>
      </div> -->
      <el-table :data="tableData.list" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" style="width: 100%;" border>
        <el-table-column prop="customerId" label="用户ID" />
        <el-table-column prop="nickname" label="用户名" />
        <el-table-column prop="phone" label="注册手机号" />
        <el-table-column prop="lastLogin" label="最近登录时间" />
        <el-table-column prop="isRead" label="是否已读">
          <template #default="{row}">
            {{row.isRead==0?'未读':'已读'}}
          </template>
        </el-table-column>
        <el-table-column prop="readAt" label="已读时间" >
          <template #default="{row}">
            {{row.readAt||'--'}}
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
        <pagination :total="tableData.total" v-model:page="tableData.query.page" v-model:limit="tableData.query.pageSize" @pagination="tableFn.getTableData" />
      </div>

    </div>

  </div>
</template>

<script>
import { reactive, ref, watch, watchEffect } from "vue";
import { getPullMessageTargetList } from "@/api/operation.js";
import Pagination from "@/components/Pagination";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
// import {ElMessage} from "element-plus";

export default {
  components: {
    Pagination,
  },
  setup() {
    const router = useRouter();
    const params = ref({});
    const query = ref({});
    watchEffect(()=>{
      params.value = router.currentRoute.value.params;
    })
    watchEffect(()=>{
      query.value = router.currentRoute.value.query;
    })
    // 默认数据备份，以便重置或恢复
    const { $data: tableData, $fn: tableFn } = tableModule(params);
    function init(){
      tableFn.getTableData();
    }
    init();

    // 从相同路由进入（params不同，query.view相同），如/a/b/1?view=1 => /a/b/2?view=1
    onBeforeRouteUpdate((to, from, next) => {
      if(to.params.id !== from.params.id && to.query.view === from.query.view){
        params.value.id = to.params.id;
        query.value = to.query;
        init();
      }
      next();
    });

    return {
      tableData,
      tableFn,
    };
  },
};

// 表格功能模块，包括搜索，分页等
function tableModule(params) {
  const backup = {
    query: {
      keyWord:"",
      isRead:"",
      pageSize: 10,
      page: 1,
    },
  };

  const $data = reactive({
    query: { ...backup.query },
    special: {
      dateRange: [],
    },
    other: {
      likeNum: 0,
      worksNum: 0,
      shareNum: 0,
    },
    list: [],
    total: 0,
  });
  const $fn = {
    getTableData() {
      console.log("target:",params.value.id,$data.query);
      getPullMessageTargetList(params.value.id, $data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items;
          $data.other = res.data.otherData;
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableData();
    },
    onSubmit() {
      console.log("$data.special.dateRange:", $data.special.dateRange);
      let dr = $data.special.dateRange;
      if (dr && dr.length === 2) {
        $data.query.startAt = dr[0];
        $data.query.endAt = dr[1];
      } else {
        $data.query.startAt = "";
        $data.query.endAt = "";
      }
      $fn.getTableData();
    },
  };

  return {
    $data,
    $fn,
  };
}
</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
</style>